<script setup lang="ts">
import * as echarts from "echarts";
import { onMounted, reactive, ref, watch } from "vue";
import { getXsfp } from "../api";
import dayjs from "dayjs";
var option = {
  tooltip: {
    trigger: "axis",
  },
  legend: {
    data: null,
    icon: "circle",
    textStyle: {
      color: "#C9D2FA",
    },
    itemGap: 5,
  },
  grid: {
    left: "3%",
    right: "4%",
    bottom: "3%",
    containLabel: true,
  },
  xAxis: {
    type: "category",
    boundaryGap: false,
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
  },
  yAxis: {
    type: "value",
  },
  series: null,
};
let currentTime = Date.now();
const data = reactive([
  dayjs(currentTime - 210000).format("HH:mm:ss"),
  dayjs(currentTime - 180000).format("HH:mm:ss"),
  dayjs(currentTime - 150000).format("HH:mm:ss"),
  dayjs(currentTime - 120000).format("HH:mm:ss"),
  dayjs(currentTime - 90000).format("HH:mm:ss"),
  dayjs(currentTime - 60000).format("HH:mm:ss"),
  dayjs(currentTime - 30000).format("HH:mm:ss"),
]);
function getXaisData() {
  var timer = null;
  timer = setInterval(() => {
    data.shift();
    data.push(dayjs(new Date()).format("HH:mm:ss"));
  }, 3000);
  return data;
}
watch(data, () => {
  getXsfp();
  myChart = echarts.init(warp.value);

  option && myChart.setOption(option);
});
const getXsfp = () => {
  let ws = new WebSocket("ws://localhost:3002/bigscreen/websockets?id=10086");
  ws.onmessage = function (result) {
    let leftBottomData = JSON.parse(result.data);
    console.log(leftBottomData, "leftBottomData");
    let SeriesData = [];
    for (let i = 0; i < leftBottomData.seriesData.length; i++) {
      let seriesDataItem = {
        name: leftBottomData.legendData[i],
        type: "line",
        stack: "Total",
        smooth: true,
        showSymbol: false,
        data: leftBottomData.seriesData[i],
      };
      SeriesData.push(seriesDataItem);
    }
    option.legend.data = leftBottomData.legendData;
    option.xAxis.data = data;
    option.series = SeriesData;
  };
};
let warp = ref("");
let myChart;
onMounted(async () => {
  getXaisData();
  getXsfp();
});
window.addEventListener("resize", function () {
  myChart.resize();
});
</script>
<template>
  <div ref="warp" style="width: 100%; height: 100%"></div>
</template>

<style>
</style>